<template>
	<view class="v-content" :style="[contentStyle]">
		<view
			class="main"
			:style="[
				{
					height: single ? '100%' : '',
				},
				mainStyle,
			]"
		>
			<slot></slot>
		</view>

		<v-modal ref="app-modal">
			<div class="app-modal">
				<v-parse :content="modal.content"></v-parse>
			</div>
		</v-modal>
		<u-toast ref="app-toast" position="top" :z-index="999999" />

		<image class="background" v-if="backgroundIsImage" :mode="backgroundMode" :src="background"></image>
	</view>
</template>

<script>
import Mixins from "@/mixins"
import ModalMixins from "./mixins/modal"
import ToastMixins from "./mixins/toast"
import { systemInfo } from "@/config"

export default {
	name: "v-content",
	mixins: [Mixins, ModalMixins, ToastMixins],
	props: {
		full: {
			type: Boolean,
			default: true,
		},
		single: {
			type: Boolean,
			default: false,
		},
		flex: {
			type: Boolean,
			default: false,
		},
		background: {
			type: [String],
			default: "#fff",
		},
		backgroundMode: {
			type: String,
			default: "aspectFill",
		},
		defaultBackground: {
			type: String,
			default: "#fff",
		},
		paddingTop: {
			type: [Number, String],
			default: 0,
		},
		paddingBottom: {
			type: [Number, String],
			default: 0,
		},
	},
	data() {
		return {}
	},
	computed: {
		screenHeight() {
			return systemInfo?.windowHeight
		},
		contentStyle() {
			return {
				minHeight: this.full ? this.screenHeight + "px" : "",
				height: this.single ? this.screenHeight + "px" : "",
				overflow: this.single ? "hidden" : "",
				background: this.backgroundIsImage ? this.defaultBackground : this.background,
			}
		},
		mainStyle() {
			let paddingTop = this.paddingTop
			if (!isNaN(+paddingTop)) {
				paddingTop += "rpx"
			}
			let paddingBottom = this.paddingBottom
			if (!isNaN(+paddingBottom)) {
				paddingBottom += "rpx"
			}
			let flexStyle = {}
			if (this.flex) {
				flexStyle = {
					"display": "flex",
					"flex-direction": "column",
					"align-content": "stretch",
					"justify-content": "flex-start",
					"align-items": "stretch",
				}
			}

			return {
				paddingTop,
				paddingBottom,

				...flexStyle,
			}
		},
		backgroundIsImage() {
			if (/^http|^\/|^\@|^\./.test(this.background)) {
				return true
			}
			return false
		},
	},
	mounted() {},
}
</script>

<style lang="scss" scoped>
.v-content {
	position: relative;
	overflow: hidden;
	.main {
		position: relative;
		z-index: 2;
		box-sizing: border-box;
	}
	.background {
		position: fixed;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		z-index: 1;
		width: 100%;
		height: 100%;
		max-height: 100vh;
	}
}
.app-modal {
	text-align: center;
}
</style>
